<template>
    <div class="letsmeet" :style="style">
        <div class="img">
            <lazyImg :src="this.propsInfo.src"></lazyImg>
        </div>
    </div>
</template>
<script>
import lazyImg from './LazyImg'

export default {

    name: 'letsmeet',

    props: ['propsIndex', 'propsInfo', 'propsLength'],

    components: {
        lazyImg
    },

    data: function() {
        return {
            style: '',
        }
    },

    created: function() {
        let tthis = this,
            time = this.getTime();

        setTimeout(function() {
            tthis.style = '-webkit-transform: translate(0px, 0px) rotate(0deg); -webkit-transition: 300ms ease-out; opacity:1; z-index:' + (tthis.propsLength - tthis.propsIndex) + '';
        }, time);
    },

    methods: {
        getTime() {
            let time, num = 120;
            return time = (this.propsLength - 1) * num - this.propsIndex * num;
        }
    }

}

</script>
<style scoped>
.letsmeet {
    max-width: 480px;
    max-height: 500px;
    min-height: 288px;
    position: absolute;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 30px 20px 110px;
    border-radius: 10px;
    opacity: 0;
    -webkit-transform: translate(400px, 0px) rotate(10deg);
}

.letsmeet .img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 70%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

</style>
